<template>
  <div class="dashboard-container" >
    <!-- 标题：订房记录 -->
    <h1 style="text-align: center;margin-bottom: 40px;font-size: 35px;color: #486180">订房记录</h1>
    <div style="margin-bottom: 40px;margin-left: 100px">
      <!-- 顾客名称输入框 -->
      <el-input
        v-model="customerName"
        placeholder="顾客名称"
        name="customerName"
        type="text"
        clearable
        style="margin-left:40px ;width: 180px"
      />
      <!-- 房间号码输入框 -->
      <el-input
        v-model="roomNumber"
        placeholder="房间号码"
        name="roomNumber"
        type="text"
        clearable
        style="margin-left:40px ;width: 180px"
      />
      <!-- 身份证号输入框 -->
      <el-input
        v-model="identificationCard"
        placeholder="身份证号"
        name="identificationCard"
        type="text"
        clearable
        style="margin-left:40px ;width: 180px"
      />
      <!-- 查询按钮 -->
      <el-button type="primary" plain style="width:80px;margin-bottom:40px;margin-left:40px;" @click="selectReserveRecords">查询</el-button>
      <!-- 重置按钮 -->
      <el-button  style="width:80px;margin-bottom:40px;margin-left:40px;" @click="checkLiveRecords">重置</el-button>
    </div>
    <!-- 订房记录表格 -->
    <el-table :data="liveRecordsList" height="659px" border style="width: 100%;margin-top: 20px">
      <el-table-column align="center" fixed prop="liveId" label="订单ID"/>  <!-- 订单ID列 -->
      <el-table-column align="center" fixed prop="customerId" label="顾客ID"/>  <!-- 顾客ID列 -->
      <el-table-column align="center" fixed prop="customerName" label="顾客名称"/>  <!-- 顾客名称列 -->
      <el-table-column align="center" fixed prop="identificationCard" label="身份证号"/>  <!-- 身份证号列 -->
      <el-table-column align="center" fixed prop="roomId" label="房间ID"/>  <!-- 房间ID列 -->
      <el-table-column align="center" fixed prop="roomNumber" label="房间号码"/>  <!-- 房间号码列 -->
    </el-table>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'  // 从vuex导入mapGetters函数，用于映射getters到组件计算属性
import { selectAllReserveRecords } from '@/api/reserveRecords'  // 导入查询所有订房记录的API函数

export default {
  name: 'user',  // 组件名称
  computed: {
    ...mapGetters([  // 使用mapGetters将vuex中的getters映射到组件计算属性
      'userId',  // 用户ID
      'userName',  // 用户名
      'roleName'  // 角色名
    ])
  },
  data(){
    return{
      customerName:'',  // 顾客名称
      roomNumber:'',  // 房间号码
      identificationCard:'',  // 身份证号
      liveRecordsList:[],  // 订房记录列表
    }
  },
  mounted() {
    this.selectReserveRecords()  // 组件挂载后自动查询订房记录
  },
  methods:{
    selectReserveRecords(){
      // 调用API查询订房记录，传入查询条件
      selectAllReserveRecords({
        customerName:this.customerName,
        roomNumber:this.roomNumber,
        identificationCard:this.identificationCard
      }).then(
        response => {
          console.log(response.data)  // 打印返回的数据
          this.liveRecordsList = response.data  // 将返回的数据赋值给订房记录列表
        }
      )
    },

    checkLiveRecords(){
      // 重置查询条件
      this.customerName = ''
      this.roomNumber = ''
      this.identificationCard = ''
      // 重新查询订房记录
      this.selectReserveRecords()
    },
  }
}
</script>


<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
